<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贵美商城主页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 S -->
    <div class="ifra">
        <iframe src="./header.html" frameborder="0" width="1024px" height="150px"></iframe>
    </div>
    <!-- 头部 E -->

    <!-- 主体 S -->
    <div class="body">
        <!-- 左导航栏 S  -->
        <div class="left">
            <div class="left-top">
                <span>商品分类</span>
                <a href="#">全部分类</a>
            </div>
            <div id="left-dianqi" class="left-bottom">
                <div class="title">
                    <a href="#">家用电器</a>
                </div>
                <div class="content">
                    <ul>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">洗衣机</a></li>
                        <li><a href="#">平板电脑</a></li>
                        <li><a href="#">电热水器</a></li>
                        <li><a href="#">家庭音响</a></li>
                        <li><a href="#">热水器</a></li>
                        <li><a href="#">空调冰箱</a></li>
                        <li><a href="#">冷柜</a></li>
                        <li><a href="#">DVD</a></li>
                        <li><a href="#">电视附件</a></li>
                        <li><a href="#">点燃气</a></li>
                        <li><a href="#">家电下乡</a></li>
                        <li><a href="#">家电服务</a></li>
                        <li><a href="#">电饭煲</a></li>
                        <li><a href="#">摄像机</a></li>
                    </ul>
                </div>
            </div>
            <div id="left-books" class="left-bottom">
                <div class="title"><a href="#">书籍</a></div>
                <div class="content">
                    <ul>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">洗衣机</a></li>
                        <li><a href="#">平板电脑</a></li>
                        <li><a href="#">电热水器</a></li>
                        <li><a href="#">家庭音响</a></li>
                        <li><a href="#">热水器</a></li>
                        <li><a href="#">空调冰箱</a></li>
                        <li><a href="#">冷柜</a></li>
                        <li><a href="#">DVD</a></li>
                        <li><a href="#">电视附件</a></li>
                        <li><a href="#">点燃气</a></li>
                        <li><a href="#">家电下乡</a></li>
                        <li><a href="#">家电服务</a></li>
                        <li><a href="#">电饭煲</a></li>
                        <li><a href="#">摄像机</a></li>
                    </ul>
                </div>
            </div>
            <div id="left-phone" class="left-bottom">
                <div class="title"><a href="#">手机数码</a></div>
                <div class="content">
                    <ul>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">洗衣机</a></li>
                        <li><a href="#">平板电脑</a></li>
                        <li><a href="#">电热水器</a></li>
                        <li><a href="#">家庭音响</a></li>
                        <li><a href="#">热水器</a></li>
                        <li><a href="#">空调冰箱</a></li>
                        <li><a href="#">冷柜</a></li>
                        <li><a href="#">DVD</a></li>
                        <li><a href="#">电视附件</a></li>
                        <li><a href="#">点燃气</a></li>
                        <li><a href="#">家电下乡</a></li>
                        <li><a href="#">家电服务</a></li>
                        <li><a href="#">电饭煲</a></li>
                        <li><a href="#">摄像机</a></li>
                    </ul>
                </div>
            </div>
            <div id="left-riyong" class="left-bottom">
                <div class="title"><a href="#">日用百货</a></div>
                <div class="content">
                    <ul>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">洗衣机</a></li>
                        <li><a href="#">平板电脑</a></li>
                        <li><a href="#">电热水器</a></li>
                        <li><a href="#">家庭音响</a></li>
                        <li><a href="#">热水器</a></li>
                        <li><a href="#">空调冰箱</a></li>
                        <li><a href="#">冷柜</a></li>
                        <li><a href="#">DVD</a></li>
                        <li><a href="#">电视附件</a></li>
                        <li><a href="#">点燃气</a></li>
                        <li><a href="#">家电下乡</a></li>
                        <li><a href="#">家电服务</a></li>
                        <li><a href="#">电饭煲</a></li>
                        <li><a href="#">摄像机</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <!-- 左导航栏 E  -->
        <!-- 中间内容 S -->
        <div class="center">
            <div class="view">
                <div class="contain">
                    <ul>
                        <li><a href=""><img src="./imgs/ad-01.jpg" alt=""></a></li>
                        <li><a href=""><img src="./imgs/ad-02.jpg" alt=""></a></li>
                        <li><a href=""><img src="./imgs/ad-03.jpg" alt=""></a></li>
                        <li><a href=""><img src="./imgs/ad-04.jpg" alt=""></a></li>
                    </ul>
                </div>
                <div id="num">
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                </div>
            </div>
            <div class="shop-list">
                <div class="title">
                    <span>疯狂抢购</span>
                </div>
                <div class="content">
                    <dl>
                        <dt><img src="./imgs/promote-1.jpg" alt=""></dt>
                        <dd><a href="">惠普商务移动应用英寸笔记本</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/promote-2.jpg" alt=""></dt>
                        <dd><a href="">夏新N6 GPS真人语音导航手机超低特价疯抢数量有限!</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/promote-3.jpg" alt=""></dt>
                        <dd><a href="">三星家庭影院HT-TZ325购机送好礼(超值性价比)</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/laser-pen.jpg" alt=""></dt>
                        <dd><a href="">明基MP512投影机2899元送100元京卷SVGA 2200流明</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/mouse.jpg" alt=""></dt>
                        <dd><a href="">罗技数据1TB移动鼠标729元开抢了!</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/earphone.jpg" alt=""></dt>
                        <dd><a href="">海森那尔极品耳机绝对不容错过!</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/Wancom.jpg" alt=""></dt>
                        <dd><a href="">亚马逊随时阅读，随时记录，时尚最佳选择!</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/Frame.jpg" alt=""></dt>
                        <dd><a href="">优雅相框</a></dd>
                    </dl>
                    <dl>
                        <dt><img src="./imgs/notebook.jpg" alt=""></dt>
                        <dd><a href="">IBM 2009最新上网本，特色尽显</a></dd>
                    </dl>
                </div>
            </div>
        </div>
        <!-- 中间内容 E -->
        <!-- 右导航栏 S -->
        <div class="right">
            <div class="board">
                <div class="title">
                    <span>公告栏</span>
                    <a href="#">全部分类</a>
                </div>
                <div class="content">
                    <dl>
                        <dt>
                            <img src="./imgs/show2.jpg" alt="" width="70px" height="70px">
                        </dt>
                        <dd><a href="">大学要求老师开网店</a></dd>
                        <dd><a href="">安全锤网上大热销</a></dd>
                        <dd><a href="">商城竟成网上试衣间</a></dd>
                        <dd><a href="">2万网上开十家连锁店</a></dd>

                    </dl>
                </div>
            </div>
            <div class="new-goods">
                <div class="title">
                    <span>新品上架</span>
                    <a href="#">全部分类</a>
                </div>
                <div class="content">
                    <dl>
                        <dt>
                            <img src="./imgs/show1.jpg" alt="">
                        </dt>
                        <dd><a href="">大牌狂降价，三折直送</a></dd>
                    </dl>

                    <dl>
                        <dt>
                            <img src="./imgs/show2.jpg" alt="">
                        </dt>
                        <dd><a href="">大学要求老师开网店</a></dd>
                    </dl>
                    <dl>
                        <dt>
                            <img src="./imgs/show3.jpg" alt="">
                        </dt>
                        <dd><a href="">黑眼圈推荐，美白不停</a></dd>
                    </dl>
                    <dl>
                        <dt>
                            <img src="./imgs/show4.jpg" alt="">
                        </dt>
                        <dd><a href="">瘦身狂潮风，修形之选</a></dd>
                    </dl>
                </div>
            </div>
            <div class="diy-select">
                <div class="title">
                    <div class="cover">
                        <ul>
                            <li id="selected"><a href="#" id="notebook">笔记本</a></li>
                            <li id=""><a href="#" id="phone">手机充值</a></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <form action="" name="computer">
                        <span> 品牌：</span>
                        <select name="pinpai" id="">
                            <option value="联想">联想</option>
                        </select>

                        <br />
                        <span> 尺寸：</span>
                        <select name="size" id="">
                            <option value="14英寸">14英寸</option>
                        </select>
                        <br />
                        <span> 价格：</span>
                        <select name="price" id="">
                            <option value="4000以下">4000以下</option>
                        </select>

                    </form>
                    <div id="zhekou-button">
                        <a href="#">查看折扣价</a>
                    </div>

                </div>
            </div>
        </div>
        <!-- 右导航栏 E -->
    </div>
    <!-- 主体 E -->

    <!-- 底部 S -->
    <div class="ifra">
        <iframe src="./footer.html" frameborder="0" width="1024px" height="160px" ></iframe>
    </div>
    <!-- 底部 E -->
</body>

</html>